<!DOCTYPE html>
<html>

	<head>
		<title>index1-cropper图片剪切上传</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<style>
			.uploadImgBtn {
				width: 100px;
				height: 100px;
				cursor: pointer;
				position: relative;
				background: url("img/plus.png") no-repeat;
				-webkit-background-size: cover;
				background-size: cover;
			}
			
			.uploadImgBtn .uploadImg {
				position: absolute;
				right: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				cursor: pointer;
			}
			
			.pic {
				width: 100px;
				height: 100px;
			}
			
			.pic img {
				width: 100%;
				height: 100%;
			}
		</style>

	</head>

	<body>
		<form id="formTag1" enctype="multipart/form-data">
			<div class="uploadImgBtn" id="uploadImgBtn"> <input class="uploadImg" type="file" name="picUrl" id="file1"> </div>
		</form>
		<script type="text/javascript" src="../../assets/libs/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../../module/common.js"></script>
	</body>
	<script>
		$(document).ready(function() {
			$("#file1").on("change", upload);
		})

		function upload() { /** * 我们存一下this对象， * 我们将在ajax的回调函数中， * 将要用这个对象， * 用它来改变父盒子的背景图 * */
			var self = this; //如果不理解我写的，可以看看我的前几篇文章 
			
			$.ajax({
				url: uploadHead,
				type: "post",
				dataType: "json",
				cache: false,
				data: new FormData($("#formTag1")[0]),
				xhrFields: {
					withCredentials: true
				},
				processData: false, // 不处理数据 
				contentType: false, // 不设置内容类型 
				success: function(data) { /* 后端返回的数据格式为 {"url": "xxxxxx"} */
				console.log(data)
					$(self).parent().css({
						"background-image": "url(" + data.url + ")"
					})
				}
			})
		}
	</script>

</html>